<template>
  <!-- 这里是顶部标题栏和搜索栏 -->
  <div id="siteNav-Wrap">
    <div id="j-YXComponentTop">
      <div class="yx-cp-base yx-cp-m-top" id="j-yx-cp-m-top">
        <div class="yx-cp-m-siteNav">
          <!-- 这里是顶部标题栏 -->
          <div class="yx-cp-row">
            <div class="yx-cp-siteNav-l"></div>
            <div class="yx-cp-siteNav-r">
              <div class="yx-cp-siteNavItem">
                <div class="yx-cp-siteNavItemHd-login">
                  <router-link to="/login">登录/注册</router-link>
                </div>
              </div>
              <div class="yx-cp-siteNavItem">
                <div class="yx-cp-siteNavItemHd">
                  <a href="javascript:;">我的订单</a>
                </div>
              </div>
              <div class="yx-cp-siteNavItem">
                <div class="yx-cp-siteNavItemHd">
                  <a href="javascript:;">会员</a>
                </div>
              </div>
              <div class="yx-cp-siteNavItem">
                <div class="yx-cp-siteNavItemHd">
                  <router-link to="/selectDetail">甄选家</router-link>
                </div>
              </div>
              <div class="yx-cp-siteNavItem">
                <div class="yx-cp-siteNavItemHd">
                  <a href="javascript:;">
                    <span> 企业采购 </span>
                    <i class="yx-cp-icon-yxtop icon-yxtop-upArrow"></i>
                  </a>
                </div>
              </div>
              <div class="yx-cp-siteNavItem">
                <div class="yx-cp-siteNavItemHd">
                  <a href="javascript:;">
                    <span>客户服务</span>
                    <i class="yx-cp-icon-yxtop icon-yxtop-upArrow"></i>
                  </a>
                </div>
              </div>
              <div class="yx-cp-siteNavItem">
                <div class="yx-cp-siteNavItemHd">
                  <a href="javascript:;">APP</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yx-cp-m-funcTab j-yx-cp-m-funcTab">
          <div class="yx-cp-row">
            <!-- 这里是搜索栏的logo图标和购物车图标 -->
            <router-link
              class="yx-cp-tabLogo yx-cp-funcTabFixed-hide"
              to="/home"
            >
              <i class="yx-cp-icon-yxtop icon-yxtop-logo"></i>
            </router-link>
            <a class="yx-cp-tabLogo-fixed yx-cp-funcTab-hide" href="#">
              <i class="yx-cp-icon-yxtop icon-yxtop-miniLogo"></i>
            </a>
            <div class="yx-cp-m-cartEnterWrap" @click="getCardList">
              <div class="yx-cp-m-cartEnter">
                <i class="yx-cp-icon-yxtop icon-yxtop-cart-s"></i>
                <span class="yx-cp-cartName">购物车</span>
                <i
                  class="j-cart-num j-cart-num2 yx-cp-icon-yxtop icon-yxtop-badge"
                  >0</i
                >
                <i class="yx-cp-icon-yxtop icon-yxtop-cart"></i>
              </div>
            </div>
            <div class="yx-cp-fixed-user yx-cp-funcTab-hide">
              <a href="#">
                <i class="yx-cp-icon-yxtop icon-yxtop-userempty"></i>
              </a>
              <div></div>
            </div>
            <!-- 这里是下面菜单栏部分-->
            <ul class="yx-cp-m-tabNav">
              <li class="yx-cp-tabNav-item yx-cp-firstItem">
                <a class="yx-cp-topLevel" href="/home">首页</a>
              </li>
              <li
                class="yx-cp-tabNav-item yx-cp-active"
                v-for="(cate, index) in cateList"
                :key="cate.id"
              >
                <a class="yx-cp-topLevel" href="/list">{{ cate.name }} </a>
                <div
                  class="yx-cp-tabNav-dropdown"
                  ref="dropdownWith"
                  :a="cate.subCateGroupList.length"
                  :style="{
                    width: `${
                      (cate.subCateGroupList.length + 1) * 124 +
                      (cate.subCateGroupList.length - 1) * 24 +
                      42
                    }px`,
                  }"
                >
                  <ul class="yx-cp-cateGroupList yx-f-clearfix">
                    <div
                      class="yx-cp-cateGroup"
                      v-for="subCateGroup in cate.subCateGroupList"
                      :key="subCateGroup.id"
                    >
                      <div class="yx-cp-cateGroup-name yx-f-text-overflow">
                        {{ subCateGroup.name }}
                      </div>
                      <div class="yx-cp-columnList yx-f-clearfix">
                        <div
                          class="yx-cp-cateColumn"
                          v-for="column in subCateGroup.categoryList"
                          :key="column.id"
                        >
                          <div class="yx-cp-cateItem">
                            <a href="javascript:;">
                              <img
                                class="yx-cp-subCate-icon"
                                :src="column.bannerUrl"
                                alt="夏凉爆款"
                              />
                              <span class="yx-cp-subCate-text"
                                >{{ column.name }}
                              </span>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </ul>
                </div>
              </li>
              <li class="yx-cp-tabNav-item">
                <a class="yx-cp-topLevel" href="javascript:;">为你严选</a>
              </li>
              <li class="yx-cp-tabNav-item">
                <a class="yx-cp-topLevel" href="/crowdfunding">众筹</a>
              </li>
            </ul>
            <!-- 这里是搜索栏的搜索框区域 -->
            <div class="yx-cp-m-search yx-cp-zIndex3">
              <div class="yx-cp-searchInputWrap">
                <i class="yx-cp-icon-yxtop icon-yxtop-search-gray"></i>
                <input type="text" class="yx-cp-searchInput" />
                <div class="yx-cp-searchDefaultKeyword">杭州游礼</div>
              </div>
              <div class="yx-cp-searchButton" @click="$router.push('/search')">
                <span>搜索</span>
              </div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下面是商品页展示列表栏 -->
    <div></div>
  </div>
</template>
<script>
import { reqGetCateListData } from "@/api/index";
// let len = 0;
export default {
  name: "Nav",
  data() {
    return {
      cateList: [],
    };
  },

  methods: {
    getCardList() {
      this.$router.push("/card");
    },
    // 定义一个函数用来解决二级菜单的宽度问题
    // menueWidth: (index) =>
    //   (len = this.subCateGroupList.index.categoryList.length),
  },

  mounted: async function () {
    const result = await reqGetCateListData();
    this.cateList = result.data;
    console.log(this.cateList);
  },

  updated: async function () {
    // console.log("今日测试", this.$refs.dropdownWith);
    // await this.menueWidth(index);
    // console.log(len);
  },
};
</script>

<style lang="less">
body {
  min-height: 100%;
  min-width: 1090px;
  background-color: #fff;
  margin: 0px;
  #siteNav-Wrap {
    #j-YXComponentTop {
      height: 176px;
      .yx-cp-m-top {
        position: relative;
        z-index: 12;
      }
      .yx-cp-base {
        line-height: 1.5;
        font-family: "Microsoft Yahei", "微软雅黑", verdana;
        color: #333;
        box-sizing: border-box;
        .yx-cp-m-siteNav {
          position: relative;
          height: 36px;
          width: 100%;
          line-height: 36px;
          background-color: #333;
          z-index: 14;
          .yx-cp-row {
            width: 1090px;
            margin: 0 auto;
            position: relative;
            .yx-cp-siteNav-l {
              float: left;
            }
            .yx-cp-siteNav-r {
              float: right;
              box-sizing: border-box;
              .yx-cp-siteNavItem {
                float: left;
                margin-left: 10px;
                position: relative;
                color: #ccc;
                .yx-cp-siteNavItemHd-login {
                  font-size: 12px;
                  height: 36px;
                  line-height: 36px;
                  cursor: pointer;
                  a {
                    display: inline-block;
                    color: #ccc;
                    text-decoration: none;
                    &:hover {
                      color: #fff !important;
                    }
                  }
                }
                .yx-cp-siteNavItemHd {
                  font-size: 12px;
                  height: 36px;
                  line-height: 36px;
                  cursor: pointer;
                  .yx-cp-icon-yxtop {
                    background-image: -webkit-image-set(url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-s1ec226323c-5e4f7cf5a5.png?imageView&type=webp) 1x,
                    url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x2/icon-yxtop-s4b76696bd6-801b2550ab.png?imageView&type=webp) 2x);
                    vertical-align: middle;
                    display: inline-block;
                    overflow: hidden;
                    font-size: 12px;
                    word-spacing: normal;
                    letter-spacing: normal;
                    margin-left: 10px;
                  }
                  .icon-yxtop-upArrow {
                    background-position: 0 -690px;
                    height: 5px;
                    width: 11px;
                    transform: rotate(180deg);
                  }

                  &::before {
                    margin-right: 10px;
                    content: "";
                    display: inline-block;
                    height: 16px;
                    border-left: 1px solid #5c5c5c;
                    vertical-align: middle;
                  }
                  a {
                    display: inline-block;
                    color: #ccc;
                    text-decoration: none;
                    &:hover {
                      color: #fff !important;
                    }
                  }
                }
              }
            }
          }
        }
        .yx-cp-m-funcTab {
          position: relative;
          height: 140px;
          background-color: #fff;
          box-shadow: 0 0 3px 0 rgb(0 0 0 / 20%);
          .yx-cp-row {
            height: 100%;
            width: 1090px;
            margin: 0 auto;
            position: relative;
            .yx-cp-tabLogo {
              position: absolute;
              top: 24px;
              left: 0;
              .yx-cp-icon-yxtop {
                background-image: -webkit-image-set(url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-s1ec226323c-5e4f7cf5a5.png?imageView&type=webp) 1x,url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x2/icon-yxtop-s4b76696bd6-801b2550ab.png?imageView&type=webp) 2x);
                display: inline-block;
                overflow: hidden;
                vertical-align: top;
                font-size: 12px;
                word-spacing: normal;
                letter-spacing: normal;
              }
              .icon-yxtop-logo {
                background-position: 0 -298px;
                height: 60px;
                width: 212px;
              }
            }
            .yx-cp-funcTab-hide {
              display: none;
              .yx-cp-icon-yxtop {
                background-image: -webkit-image-set(url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-s1ec226323c-5e4f7cf5a5.png?imageView&type=webp) 1x,
                url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x2/icon-yxtop-s4b76696bd6-801b2550ab.png?imageView&type=webp) 2x);
                overflow: hidden;
                vertical-align: top;
                font-size: 12px;
                word-spacing: normal;
                letter-spacing: normal;
              }
              .icon-yxtop-miniLogo {
                background-position: 0 -438px;
                height: 30px;
                width: 126px;
              }
            }
            .yx-cp-m-cartEnterWrap {
              position: relative;
              margin-top: 26px;
              margin-left: 49px;
              float: right;
              z-index: 4;
              .yx-cp-m-cartEnter {
                position: relative;
                cursor: pointer;
                width: 132px;
                height: 20px;
                border: 1px solid #cc9756;
                border-radius: 19px;
                padding: 8px 0;
                .yx-cp-icon-yxtop {
                  background-image: -webkit-image-set(url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-s1ec226323c-5e4f7cf5a5.png?imageView&type=webp) 1x,
                  url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x2/icon-yxtop-s4b76696bd6-801b2550ab.png?imageView&type=webp) 2x);
                  display: inline-block;
                  overflow: hidden;
                  vertical-align: top;
                  font-size: 12px;
                  word-spacing: normal;
                  letter-spacing: normal;
                }
                .icon-yxtop-cart-s {
                  margin-left: 22px;
                  background-position: 0 -148px;
                  height: 18px;
                  width: 18px;
                }
                .yx-cp-cartName {
                  color: #cc9756;
                  margin-left: 5px;
                  margin-top: -1px;
                  font-size: 14px;
                }
                .yx-cp-icon-yxtop {
                  background-image: -webkit-image-set(url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-s1ec226323c-5e4f7cf5a5.png?imageView&type=webp) 1x,
                  url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x2/icon-yxtop-s4b76696bd6-801b2550ab.png?imageView&type=webp) 2x);
                  display: inline-block;
                  overflow: hidden;
                  vertical-align: top;
                  font-size: 12px;
                  word-spacing: normal;
                  letter-spacing: normal;
                }
                .icon-yxtop-badge {
                  margin-left: 10px;
                  background-position: 0 -51px;
                  height: 19px;
                  width: 19px;
                  margin-top: -1px;
                  color: #fff;
                  text-align: center;
                  line-height: 20px;
                  z-index: 1;
                }
              }
            }
            .yx-cp-fixed-user {
              position: relative;
              margin-top: 14px;
              padding-bottom: 19px;
              float: right;
            }
            .yx-cp-funcTab-hide {
              display: block;
            }
            .yx-cp-m-tabNav {
              margin: 0;
              padding: 0;
              line-height: 1;
              font-weight: 700;
              position: absolute;
              height: 30px;
              bottom: 21px;
              width: 100%;
              .yx-cp-tabNav-item {
                float: left;
                margin-top: 27px;
                padding: 0 19px;
                font-size: 14px;

                .yx-cp-topLevel {
                  display: block;
                  padding-bottom: 7px;
                  color: #000;
                  text-decoration: none;
                  &:hover {
                    color: #cc9756 !important;
                    border-bottom: 3px solid #cc9756;
                  }
                  &:hover + .yx-cp-tabNav-dropdown {
                    display: block;
                  }
                }
                .yx-cp-tabNav-dropdown {
                  // width: 1900px;
                  display: none;
                  // display: block;
                  left: -100px;
                  position: absolute;
                  top: 51px;
                  background-color: transparent;
                  z-index: 15;
                  box-sizing: border-box;z
                  &:hover {
                    display: block;
                  }
                  .yx-cp-cateGroupList {
                    padding: 14px 20px 20px;
                    background: #fff;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    overflow: hidden;
                    z-index: 15;
                    .yx-cp-cateGroup {
                      width: 124px;
                      float: left;
                      margin-right: 24px;
                      .yx-cp-cateGroup-name {
                        max-width: 124px;
                        width: 124px;
                        display: inline-block;
                        margin-bottom: 10px;
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 36px;
                        border-bottom: 1px solid #ddd;
                      }
                      .yx-f-text-overflow {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      }
                      .yx-cp-columnList {
                        overflow: hidden;
                        &:first-child {
                          margin-left: 0;
                        }
                        .yx-cp-cateColumn {
                          float: left;
                          width: 124px;
                          .yx-cp-cateItem {
                            margin-bottom: 4px;
                            font-weight: 400;
                            line-height: 50px;
                            a {
                              .yx-cp-subCate-icon {
                                height: 50px;
                                width: 50px;
                                border: 0;
                                vertical-align: top;
                              }
                              .yx-cp-subCate-text {
                                display: inline-block;
                                width: 70px;
                                max-width: 70px;
                                max-height: 48px;
                                margin-left: 4px;
                                font-size: 14px;
                                vertical-align: middle;
                                line-height: 1.2;
                                overflow: hidden;
                                word-wrap: break-word;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
              .yx-cp-firstItem {
                margin-left: 0;
                padding-left: 0;
              }
              .yx-cp-tabNav-split {
                border-left: 1px solid #ccc;
                height: 14px;
                margin-top: 28px;
                float: left;
              }
            }
            .yx-cp-zIndex3 {
              z-index: 3;
            }
            .yx-cp-m-search {
              position: relative;
              margin-top: 26px;
              float: right;
              width: 532px;
              height: 36px px;
              .yx-cp-searchInputWrap {
                .yx-cp-icon-yxtop {
                  background-image: -webkit-image-set(url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-s1ec226323c-5e4f7cf5a5.png?imageView&type=webp) 1x,
                  url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x2/icon-yxtop-s4b76696bd6-801b2550ab.png?imageView&type=webp) 2x);
                  display: inline-block;
                  overflow: hidden;
                  vertical-align: top;
                  font-size: 12px;
                  word-spacing: normal;
                  letter-spacing: normal;
                }
                .icon-yxtop-search-gray {
                  position: absolute;
                  left: 18px;
                  top: 12px;
                  background-position: 0 -518px;
                  height: 14px;
                  width: 14px;
                }
                .yx-cp-searchInput {
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: 1;
                  display: block;
                  height: 32px;
                  line-height: 32px;
                  padding-top: 2px;
                  padding-bottom: 2px;
                  border: 1px solid #cc9756;
                  border-bottom-left-radius: 19px;
                  border-top-left-radius: 19px;
                  font-size: 14px;
                  width: 402px;
                  padding-left: 38px;
                  outline: 0;
                  overflow: hidden;
                  background: 0 0;
                }
                .yx-cp-searchDefaultKeyword {
                  position: absolute;
                  top: 12px;
                  left: 38px;
                  color: #999;
                  display: block;
                  line-height: 1;
                  cursor: text;
                  touch-action: none;
                  pointer-events: none;
                  -webkit-user-select: none;
                  white-space: nowrap;
                  overflow: hidden;
                  width: 390px;
                  text-overflow: ellipsis;
                  font-size: 14px;
                }
              }

              .yx-cp-searchButton {
                width: 90px;
                height: 38px;
                background-color: #cc9756;
                border-top-right-radius: 19px;
                border-bottom-right-radius: 19px;
                cursor: pointer;
                float: right;
                color: #fff;
                line-height: 38px;
                text-align: center;
                font-size: 16px;
                letter-spacing: 1px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
